// 标签设置
import React, { useState } from 'react';
import { Switch, Select, InputNumber } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import InputColorPicker from '../InputColorPicker';
const { Option } = Select;

interface IProps {
    config: any;
    onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
    form: any;
}

const LineSetting = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	// const fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic' ];
	const [ isShowMarker, setisShowMarker ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowMarker' ) ? config.style.isShowMarker : false
	);
	const [ chartLabelMarkColor, setChartLabelMarkColor ] = useState( config.style.chartLabelMarkColor || 'rgb(134, 188, 37)' );

	// const [ chartLabelMarkType, setChartLabelMarkType ] = useState(
	// 	config.style && config.style.hasOwnProperty( 'chartLabelMarkType' ) ? config.style.chartLabelMarkType : 'diamond'
	// );

	const onChange = ( checked: boolean, name: string, cb: any ) => {
		cb && cb();
		form.setFieldsValue( { [name]: checked } );
		onValuesChange( config.type, config.key, { [name]: checked }, 'style' );
	};

	const onColorChange = ( color ) => {
		setChartLabelMarkColor( color );
		form.setFieldsValue( { chartLabelMarkColor: color } );
		onValuesChange( config.type, config.key, { chartLabelMarkColor: color }, 'style' );
	};

	return (
		<div>
			<FormItem label="线条宽度" name="chartLineWidth" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
				<InputNumber min={1} defaultValue={2}></InputNumber>
			</FormItem>
			<FormItem label="是否显示标记" name="isShowMarker" labelAlign="left" labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
				<Switch
					checked={isShowMarker}
					onChange={( checked ) => onChange( checked, 'isShowMarker', setisShowMarker( checked ) )}
				></Switch>
			</FormItem>
			{isShowMarker && (
				<>
					<FormItem label="标记样式" name="chartLabelMarkType" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<Select defaultValue='circle'>
							<Option value="circle">实心圆</Option>
							<Option value="hollowCircle">空心圆</Option>
							<Option value="diamond">菱形</Option>
							<Option value="triangle">三角形</Option>
							<Option value="square">正方形</Option>
						</Select>
					</FormItem>
					<FormItem label="标记大小" name="chartLabelMarkSize" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<InputNumber min={0} defaultValue={5}></InputNumber>
					</FormItem>
					<FormItem label="标记颜色" name="chartLabelMarkColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<InputColorPicker
							color={chartLabelMarkColor}
							change={onColorChange}
						></InputColorPicker>
					</FormItem>

				</>
			)}

		</div>
	);
};

export default React.memo( LineSetting );
